<template>
  <!-- <div :class="{ drag: dragging }"> -->
  <div>
    <div class="layout-container">
      {{ mainData }}
      <div :class="key" v-for="(item, key) in mainData" :key="key">
        <draggable
          v-bind="dragOptions"
          class="list-group"
          :list="item"
          @end="onEnd"
          @start="onStart"
        >
          <transition-group name="list">
            <div
              class="list-group-item"
              v-for="element in item"
              :key="element.id"
            >
              <div class="drag-handle">{{ element.title }}</div>
              <div class="component-box">
                <component :is="element.name" />
              </div>
            </div>
          </transition-group>
        </draggable>
      </div>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import viewOne from "../components/one.vue";
import viewTwo from "../components/two.vue";
import viewThree from "../components/three.vue";
import viewFour from "../components/four.vue";
import viewFive from "../components/five.vue";
export default {
  components: {
    draggable,
    viewOne,
    viewTwo,
    viewThree,
    viewFour,
    viewFive,
  },
  data() {
    return {
      dragging: false,
      componentList: [
        { name: "viewOne", title: "11111111111", id: "1" },
        { name: "viewTwo", title: "22222222222", id: "2" },
        { name: "viewThree", title: "333333333333", id: "3" },
        { name: "viewFour", title: "4444444444", id: "4" },
        { name: "viewFive", title: "55555555", id: "5" },
      ],
      layout: {
        top: ["1"],
        left: ["2", "3"],
        right: ["4", "5"],
      },
      mainData: {},
    };
  },
  computed: {
    dragOptions() {
      return {
        animation: 30,
        handle: ".drag-handle",
        group: "description",
        ghostClass: "ghost",
        // chosenClass: "sortable", //拖拽操作
        forceFallback: true,
      };
    },
  },
  mounted() {
    this.getLayout();
  },
  methods: {
    onStart() {
      // this.dragging = true;
    },
    onEnd() {
      // this.dragging = false;
      this.setLayout();
    },
    getLayout() {
      this.mainData = {
        top: [{ name: "viewOne", title: "11111111111", id: "1" }],
        left: [
          { name: "viewTwo", title: "22222222222", id: "2" },
          { name: "viewThree", title: "333333333333", id: "3" },
        ],
        right: [
          { name: "viewFour", title: "4444444444", id: "4" },
          { name: "viewFive", title: "55555555", id: "5" },
        ],
      };
    },
    setLayout() {
      const res = {};
      for (const side in this.mainData) {
        const item = this.mainData[side].map((i) => i.id);
        res[side] = item;
      }
      window.localStorage.setItem("kon", JSON.stringify(res));
    },
  },
};
</script>
<style lang="scss" scoped>
.layout-container {
  height: 100%;
  display: flex;
  min-height: 100px;
  flex-wrap: wrap;
  .top {
    width: 100%;
  }
  .left {
    flex: 1;
    margin-right: 40px;
  }
  .right {
    width: 45%;
  }
  .list-group-item {
    margin-bottom: 20px;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
  }
  // .component-box {
  //   padding: 20px;
  // }
  .drag-handle {
    cursor: move;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 0 20px;
    background: #6cf;
  }
}
.drag {
  .component-box {
    display: none;
  }
}

.list-enter-active {
  transition: all 0.3s linear;
}
.list-enter,
.list-leave-to {
  opacity: 0.5;
}

.sortable {
  .component-box {
    display: none;
    height: 0;
  }
}
.list-group {
  > span {
    display: block;
    min-height: 300px;
  }
}

.ghost {
  .drag-handle {
    background: rgb(129, 168, 187);
  }
}
</style>